Fungsi Elemen Head pada HTML

Tutorial HTML; Diperbarui tanggal: 9/09/2025

Elemen head HTML digunakan untuk menyediakan informasi meta tentang halaman web kepada browser dan mesin pencari. Elemen ini biasanya berada di antara tag <html> dan <body> pada halaman web dan terdiri dari beberapa tag seperti <title>, <meta>, <link>, dan lainnya. Berikut adalah beberapa fungsi dari elemen head HTML:

  1. <title>: Menentukan judul dari halaman web yang akan ditampilkan pada tab browser dan hasil pencarian mesin pencari.
  2. <meta>: Menyediakan informasi meta tentang halaman web seperti deskripsi, kata kunci, dan bahasa. Informasi ini dapat membantu mesin pencari memahami isi halaman web dan meningkatkan peringkat halaman pada hasil pencarian.
  3. <link>: Menyediakan tautan ke file eksternal seperti file CSS dan favicon.
  4. <script>: Digunakan untuk menambahkan skrip JavaScript ke halaman web.
  5. <style>: Digunakan untuk menambahkan CSS ke halaman web.
  6. <base>: Menentukan URL basis untuk semua tautan di halaman web.
  7. <noscript>: Menyediakan konten alternatif untuk browser yang tidak mendukung skrip JavaScript.

 

Elemen <title> HTML

Tag <title> HTML digunakan untuk menentukan judul dari halaman web. Judul tersebut akan ditampilkan pada tab browser ketika pengguna membuka halaman web dan juga ditampilkan pada hasil pencarian mesin pencari. Berikut adalah beberapa fungsi dari tag <title> HTML:

  1. Meningkatkan keterbacaan halaman web: Dengan menentukan judul yang relevan dan deskriptif, pengguna dapat dengan mudah mengenali dan memahami isi halaman web. Ini dapat meningkatkan keterbacaan dan pengalaman pengguna.
  2. Meningkatkan optimasi mesin pencari: Mesin pencari menggunakan judul halaman web sebagai salah satu faktor peringkat. Dengan menentukan judul yang relevan dan sesuai dengan isi halaman web, dapat membantu meningkatkan peringkat halaman pada hasil pencarian mesin pencari.
  3. Menarik perhatian pengguna: Judul halaman web yang menarik dan relevan dapat memancing minat pengguna untuk mengklik dan membuka halaman web. Hal ini dapat membantu meningkatkan lalu lintas dan interaksi pengguna pada halaman web.
  4. Membantu branding: Judul halaman web dapat membantu meningkatkan branding dan identitas merek pada halaman web. Pengguna dapat mengenali dan mengingat merek atau situs web dengan judul yang konsisten dan mudah diingat.

Contoh penggunaan:

<!DOCTYPE html>
 <html>
   <head>
    <title>Judul artikel</title>
   </head>
  <body>
      Konten halaman web
  </body>
</html>

 

Elemen <meta> HTML

Elemen <meta> dapat digunakan untuk memberikan informasi tambahan seperti character set, deskripsi, kata kunci, penulis halaman, dan pengaturan viewport.

Elemen meta tidak akan ditampilkan pada halaman web, tetapi akan digunakan oleh browser, mensin pencarian dan web servise lainnya. Berikut adalah beberapa elemen meta yang penting.

Mendefinisikan character set atau karakter pengkodean

<meta charset="UTF-8">

Mendefinisikan kata kunci untuk mesin pencari

<meta name="keywords" content="HTML, CSS, JavaScript">

Mendefinisikan Penulis 

<meta name="author" content="Educhannel">

Merefreh halaman setiap beberapa menit.

Contoh merefresh halaman setiap 60 detik.

<meta http-equiv="refresh" content="60">

Mengatur Viewport agar website dapat menyesuaikan tampilan sesuai dengan parangkat.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

 

Elemen <style> HTML

Elemen <style> digunakan untuk mengatur style atau gaya untuk satu halaman HTML. Berikut adalah beberapa fungsi dari elemen <style>:

  1. Memisahkan antara struktur dan tampilan: Dengan menggunakan CSS di dalam elemen <style>, pengguna dapat memisahkan antara struktur atau konten halaman web dengan tampilan atau gayanya. Hal ini memungkinkan perubahan pada tampilan halaman web tanpa harus memodifikasi konten atau strukturnya.
  2. Memudahkan pengembangan dan pemeliharaan: Dengan memisahkan antara struktur dan tampilan, pengembang web dapat lebih mudah mengembangkan dan memelihara halaman web. Perubahan pada tampilan halaman web dapat dilakukan pada elemen <style> tanpa harus memodifikasi konten atau struktur halaman web.
  3. Memungkinkan penyesuaian dan fleksibilitas: Dengan menggunakan CSS di dalam elemen <style>, pengguna dapat menyesuaikan tampilan halaman web sesuai dengan preferensi dan kebutuhan. Hal ini memberikan fleksibilitas dan dapat membantu meningkatkan pengalaman pengguna pada halaman web.
  4. Menghemat waktu dan sumber daya: Dengan menggunakan CSS di dalam elemen <style>, pengguna dapat menghemat waktu dan sumber daya karena CSS dapat diterapkan pada beberapa elemen secara bersamaan tanpa harus menyalin kode CSS yang sama berkali-kali.

Contoh penggunaan elemen <style>.

<!DOCTYPE html>
<html>
<head>
	<title>Contoh Elemen Style</title>
	<style>
		body {
			background-color: lightblue;
			font-family: Arial, sans-serif;
		}
		h1 {
			color: white;
			text-align: center;
		}
		p {
			font-size: 18px;
			line-height: 1.5;
			color: black;
		}
	</style>
</head>
<body>
	<h1>Contoh Elemen Style</h1>
	<p>Ini adalah contoh elemen <style> pada halaman web. Elemen ini digunakan untuk menentukan gaya atau tampilan halaman web menggunakan CSS.</p>
</body>
</html>

Elemen <script> HTML

Elemen <script> HTML digunakan untuk memasukkan atau menambahkan skrip atau kode JavaScript pada halaman web. Elemen <script> biasanya terletak di dalam elemen <head> atau <body> pada halaman web. Berikut adalah beberapa fungsi dari elemen <script> HTML:

  1. Interaktifitas: Elemen <script> digunakan untuk menambahkan interaktifitas pada halaman web. Dengan menggunakan kode JavaScript pada elemen <script>, pengguna dapat menambahkan fitur seperti validasi form, efek animasi, dan lain sebagainya pada halaman web.
  2. Pemrosesan data: Elemen <script> dapat digunakan untuk memproses dan memanipulasi data pada halaman web. Dengan menggunakan kode JavaScript pada elemen <script>, pengguna dapat memproses dan memanipulasi data seperti menghitung nilai, menyimpan data ke database, dan lain sebagainya pada halaman web.
  3. Pemanggilan API: Elemen <script> dapat digunakan untuk memanggil API (Application Programming Interface) dari pihak ketiga pada halaman web. Dengan menggunakan kode JavaScript pada elemen <script>, pengguna dapat memanggil API seperti Google Maps API, Twitter API, dan lain sebagainya pada halaman web.
  4. Pengoptimalan kinerja: Elemen <script> dapat digunakan untuk mengoptimalkan kinerja halaman web. Dengan menempatkan kode JavaScript pada elemen <script> di akhir halaman web atau menggunakan teknik async dan defer, pengguna dapat meningkatkan waktu muat halaman web.
<script>
  function myFunction() {
    alert('Selama datang diwebsite kami')
  }
</script>

Elemen <base> HTML

Elemen <base> HTML digunakan untuk menentukan URL dasar atau URL root untuk semua URL yang terkait dengan halaman web. Elemen <base> biasanya terletak di dalam elemen <head> pada halaman web. Contoh:

<head>
  <base href="https://educhannel.id/" target="_blank">
</head>

<body>
  <a href="blog">Blog Educhannel.id</a><br>
  <a href="tutorial">Turorial Educhannel.id</a>
</body>